<template>
    <div class="page">
       <!-- <div class="top">
            <div class="top_left_swiper">
                <div class="top_common_title">
                    <div class="top_common_title_left">
                        <img class="top_common_title_left_icon" src="../../../assets/bbmg/safe/leader.png"/>
                        <p class="top_common_title_left_title">有感领导</p>
                    </div>
                    <router-link class="top_common_title_right"
                    :to="{path:'/articalList', query:{type:3}}">更多></router-link>
                </div>
          &lt;!&ndash;  <img class="top_img" src="../../../assets/bbmg/safe/eye.png"/> &ndash;&gt;
                <swiper  class="top_img"  :options="swiperOption">
                   <swiper-slide  class="top_img"  v-for="(item,index) in lunboArticals">
                       <img class="top_img" :src="item.img"  @click="toViewArtical(index,'3')"/>
                   </swiper-slide>
                </swiper>
            </div>
           <div class="top_center_leader">
                <div class="top_common_title">
                    <div class="top_common_title_left">
                        <img class="top_common_title_left_icon" src="../../../assets/bbmg/safe/jianghua.png"/>
                        <p class="top_common_title_left_title">领导讲话</p>
                    </div>
                    <router-link  class="top_common_title_right" :to="{path:'/articalList', query:{type:1}}">更多></router-link>
                </div>
                <div class="top_artical_div">
                    <ul  class="articals" v-for = "(item,index) in jiangHuaArticals">
                        <li class="artical">
                            <div class="articals_child" @click="toViewArtical(index,'1')">
                                <p class="articals_child_title">{{item.infoTitle}}</p>
                                <p class="articals_child_date">{{item.createDate}}</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="top_right_zixun">
                <div class="top_common_title">
                    <div class="top_common_title_left">
                        <img class="top_common_title_left_icon" src="../../../assets/bbmg/safe/zixun.png"/>
                        <p class="top_common_title_left_title">活动资讯</p>
                    </div>
                    <router-link class="top_common_title_right"
                    :to="{path:'/articalList', query:{type:2}}">更多></router-link>
                </div>
                <div class="top_artical_div">
                    <ul  class="articals" v-for = "(item,index) in huoDongArticals">
                        <li class="artical">
                            <div class="articals_child"  @click="toViewArtical(index,'2')">
                                <p class="articals_child_title">{{item.infoTitle}}</p>
                                <p class="articals_child_date">{{item.createDate}}</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>-->
        <img style="width:1200px;height:90px;margin-top: 20px" src="../../../assets/bbmg/safe/zhengji.jpg"/>
        <div class="down">
            <div class="row">
                <div v-for="(item,index) in lists" class="row_child_item" :title="item.worksTitle">
                    <img v-if="item.worksType == '1'" class="row_child_item_img" src="../../../assets/img/video.jpg"  @click="toViewvideo(index)"/>
                    <img v-else class="row_child_item_img"  :src="item.cover"  @click="toViewvideo(index)"/>
                    <div class="row_child_item_all_info" >
                      <p class="row_child_item_title" v-if="item.companyName">{{item.companyName}}</p>
                      <p class="row_child_item_title" style="margin-top: 5px">{{item.title}}</p>
                        <div class="row_child_item_info">
                            <label class="row_child_item_info_left">{{item.createDate}}</label>
                            <div class="row_child_item_info_right">
                                <div class="row_child_item_info_right_child" @click="toViewvideo(index)">
                                    <img  class="row_child_item_info_right_child_icon" src="../../../assets/bbmg/safe/eye.png"/>
                                    <label class="row_child_item_info_right_child_label">{{item.browse}}</label>
                                </div>
                                <div  class="row_child_item_info_right_child" @click="clickThumb(index)">
                                <img  class="row_child_item_info_right_child_icon"  src="../../../assets/bbmg/safe/zan.png"/>
                                    <label class="row_child_item_info_right_child_label">{{item.thumbs}}</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <p class="more-zp"  @click="toNextPage">查看更多作品 >> </p>
        <div class="down_info">
            <p class="down_red_line_4">    </p>
            <p class="down_red_line_1">    </p>
        </div>
    </div>
</template>

<script>
import {Api} from '../../../api/index.js'
import {sessionStorage} from '../../../common/cacheUtils.js';
// import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
    // import 'swiper/css/swiper.css'

    export default {
        // components: {
        //     Swiper,
        //     SwiperSlide
        // },
        // directives: {
        //     swiper: directive
        // },
        data(){
            return {
                currentPage: 1,
                /*swiperOption: {
                    spaceBetween: 30,
                    centeredSlides: true,
                    observer:true,
                    observeParents:true,
                    slidesPerView: 1,
                    autoplay: {
                        delay: 2500,
                        disableOnInteraction: false
                    },
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true
                    }

                },
                swiperImgs:[
                ],*/
                lists:[],
                huoDongArticals:[],
                jiangHuaArticals:[],
                lunboArticals:[]
            }
        },
        mounted(){
            this.queryWorks(1);
            // this.queryArticals();
        },
        methods:{
            queryWorks(type){
                let userId = sessionStorage('userId').getObject('userId').userId;
                this.$http.get(Api.queryWorks+"?type="+type+"&startPage="+this.currentPage+"&size=16&userId="+userId).then(res => {
                    res.data.data.data.forEach(item=>{
                        item.createDate = this.formatDate(new Date(item.createDate), 'yyyy-MM-dd');
                        if(item.browse == null)
                            item.browse = 0;
                        if(item.thumbs == null)
                            item.thumbs = 0;
                    if(item.worksType == '1'){
                        this.$http.get(Api.getMongoFileInfo+"/"+ item.activitysCover).then((res1) => {
                            this.$set(item,"cover",res1.data.picture)
                            }).catch(e => {});
                    }else{
                        this.$http.get(Api.morePicture + "/" + item.id + "?type=picture").then((res1) => {
                            if(res1.data.data.length >0)
                                this.$set(item,"cover",Api.viewPicture + res1.data.data[0].filePath)
                            }).catch(e => {});
                    }
                   this.lists.push(item);
                        });
                }).catch(e => {
                    this.$Message.error('请求失败');
                })
            },
            clickThumb(index){
                let userId = sessionStorage('userId').getObject('userId').userId;
                this.$http.get(Api.clickThumb+"?worksId="+this.lists[index].id+"&userId="+userId).then(res => {
                    if(res.data.status == 200){
                        this.lists[index].thumbsStatus = res.data.data;
                        if(this.lists[index].thumbsStatus=='1'){
                            this.lists[index].thumbs++;
                        }else{
                            this.lists[index].thumbs--;
                        }
                    }
                })
            },
            toViewvideo(index) {
                this.$http.get(Api.addBrowse + "/" + this.lists[index].id).then(res => {
                })
                if (this.lists[index].worksType == '1'){
                    // this.$router.push({path: "/videoPlay", query: {id: this.lists[index].id}});
                    let routeUrl = this.$router.resolve({
                        path: "/videoPlay",
                        query: {id:this.lists[index].id,type:0}
                    });
                    window.open(routeUrl.href, '_blank');
                }else{
                    // this.$router.push({path:"/articalPlay",query:{id:this.lists[index].id}});
                    let routeUrl = this.$router.resolve({
                        path: "/articalPlay",
                        query: {id:this.lists[index].id}
                    });
                    window.open(routeUrl.href, '_blank');
                }

            },
            toNextPage(){
                this.currentPage++;
                this.queryWorks(1);
            },
            /*queryArticals(){
                this.$http.get(Api.getArticals+"?startPage=1&size=6&infoType=3").then(res => {
                    if(res.data.status == 200){
                        this.lunboArticals = res.data.data.data;
                        this.lunboArticals.forEach(item=>{
                        if(item.cover!=null){
                            let url = Api.getMongoFileInfo +'/' + item.cover;
                            this.$http.get(url, {params: {}}).then((res) => {
                                item.img = res.data.picture;
                            }).catch(e => {
                                //console.log(e)
                                this.$Message.error("数据获取失败")
                            })
                        }
                        })
                    }
                });
                this.$http.get(Api.getArticals+"?startPage=1&size=6&infoType=1").then(res => {
                    if(res.data.status == 200){
                        this.jiangHuaArticals = res.data.data.data;
                        this.jiangHuaArticals.forEach(item=>{
                            item.createDate = this.formatDate(new Date(item.createDate), 'yyyy-MM-dd');
                        })
                    }
                });
                this.$http.get(Api.getArticals+"?startPage=1&size=6&infoType=2").then(res => {
                    if(res.data.status == 200){
                        this.huoDongArticals = res.data.data.data;
                        this.huoDongArticals.forEach(item=>{
                            item.createDate = this.formatDate(new Date(item.createDate), 'yyyy-MM-dd');
                        })
                    }
                })
            },
            toViewArtical(index,type){
                if(type == "1"){
                    this.$router.push({path:"/artical",query:{id:this.jiangHuaArticals[index].infoId}});
                }else if(type=="2"){
                    this.$router.push({path:"/artical",query:{id:this.huoDongArticals[index].infoId}});
                }else{
                    this.$router.push({path:"/artical",query:{id:this.lunboArticals[index].infoId}});
                }
            },*/
            toPromise(){
                this.$router.push({path:"/promise"});
            },
            formatDate(date, fmt) {
                if (/(y+)/.test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
                }
                let o = {
                    'M+': date.getMonth() + 1,
                    'd+': date.getDate(),
                    'h+': date.getHours(),
                    'm+': date.getMinutes(),
                    's+': date.getSeconds()
                };
                for (let k in o) {
                    if (new RegExp(`(${k})`).test(fmt)) {
                        let str = o[k] + '';
                        fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str));
                    }
                }
                return fmt;
            },
            padLeftZero(str) {
                return ('00' + str).substr(str.length);
            },
        }
    }
</script>

<style scoped>

.page{
    background: #F4F5F6;
    min-width:1250px;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    overflow-x:hidden;
}

.top{
    margin-top:20px;
    width:1200px;
    height:260px;
    display: flex;
    justify-content: space-between;
}

.top_left_swiper{
    height: 260px;
    width: 384px;
    display: flex;
    flex-direction: column;
}

.top_center_leader{
    height: 260px;
    width: 384px;
    display: flex;
    flex-direction: column;
    margin-left:20px;
    margin-right: 20px;
}

.top_right_zixun{
    height: 260px;
    width: 384px;
    display: flex;
    flex-direction: column;
}

.top_common_title{
    background-image: url("../../../assets/bbmg/safe/title_bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
}



.top_common_title_left{
    display: flex;
    align-items: center;
    height: 30px;
}

.top_common_title_left_icon{
    margin-left: 55px;
    width: 17px;
    height: 19px;
}


.top_common_title_left_title{
    margin-left: 10px;
    width: 57px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #FFFFFF;
}


.top_common_title_right{
    width: 40px;
    height: 13px;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #E43534;
    line-height: 38px;
}

.top_img{
    height: 200px;
    width: 387px;
}

.articals{
    width: 100%;
    background: #FFFFFF;
}

.artical{
    margin-left: 15px;
    display: flex;
}

.articals_child{
    display: flex;
    justify-content: space-between;
}

.articals_child_title{
    width: 260px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    line-height: 32px;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
}

.articals_child_date{
    width: 80px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #A3A3A3;
    line-height: 32px;
}

.articals_child:hover .articals_child_date,.articals_child:hover .articals_child_title{
    cursor: pointer;
    color: #F65555;
}

.top_artical_div{
    height:200px;
    background-color:#fff;
}

ul {
    list-style-type: none;
}

ul li:before{
    display: inline-block;
    content: "▶";
    padding-right: 10px;
    color: #FEA6A5;
    font-size:6px;
    line-height: 32px;
}

.top_button_jihe{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 120px;
    height: 55px;
}

.top_button{
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #D80200;
}

.down{
    width:100%;
    background: #F4F5F6;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    flex-grow: 1;
}

.row{
    display: flex;
    justify-content: space-between;
    flex-wrap:wrap;
    width:1200px;
    background: #F4F5F6;
}

.row_child_item{
    margin-top:20px;
    display: flex;
    flex-direction: column;
    width: 285px;
    height:300px;
    background: #FFFFFF;
    border: 1px solid #E3E3E3;
    border-radius: 5px;
}

.row_child_item:hover{
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
}

.row_child_item_img{
    width: 285px;
    height: 220px;
    border-radius: 5px;
}

.row_child_item_all_info{
    padding-top:10px;
    padding-bottom: 10px;
    height: 80px;
    display:flex;
    flex-direction: column;
    justify-content: space-around;
    padding-left: 12px;
    padding-right: 12px;
}

.row_child_item_title{
    width: 210px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.row_child_item_info{
    display: flex;
    justify-content: space-between
}

.row_child_item_info_left{
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #B3B3B3;
}

.row_child_item_info_right{
    width:120px;
    display: flex;
    justify-content: space-around
}

.row_child_item_info_right_child{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.row_child_item_info_right_child_icon{
    width: 19px;
    height: 15px;
}

.row_child_item_info_right_child_icon:hover{
    cursor: pointer;
}

.row_child_item_info_right_child_label{
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #B3B3B3;
    margin-left:5px;
}

.down_red_line_4{
    margin-top:22px;
    width:1200px;
    height: 4px;
    background-color: red;
}

.more-zp{
    margin-top:23px;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #FF8A89;
    line-height: 38px;
}

.more-zp:hover{
    cursor: pointer;
}

.down_info{
    display: flex;
    flex-direction: column;
    height: 200px;
}

.down_red_line_1{
    margin-top:3px;
    width:1200px;
    height: 1px;
    background-color: red;
}

.down_company_info{
    margin: 24px;
    width: 1200px;
    height: 13px;
    text-align: center;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ADADAD;
    line-height: 24px;
}

.thumbStatus{
    background-color:red;
    color:red;
}
</style>
